<div class="row">
  <label>
    {{t "alertPage.newOrEdit.alertRule"}}
  </label>
</div>
<hr />
{{#unless monitoringEnabled}}
  {{#if enableMonitoringRoute}}
    {{#banner-message color="bg-info mb-10 mt-10"}}
      <p>
        {{t "alertPage.newOrEdit.monitoringDisabled"}}
        {{#link-to-external enableMonitoringRoute}}
          {{t "alertPage.newOrEdit.enableMonitoring"}}
        {{/link-to-external}}
        .
      </p>
    {{/banner-message}}
  {{/if}}
{{/unless}}
<div class="mb-10 pt-5">
  {{#if enableMonitoringRoute}}
    {{#each alertRules key="id" as |alertRule|}}
      {{#if (eq pageScope "cluster")}}
        {{alert/form-cluster-rule-row
          removeRule=(action "removeRule")
          alertRules=alertRules
          editing=editing
          pageScope=pageScope
          isCreate=isCreate
          model=alertRule
          monitoringEnabled=monitoringEnabled
          metrics=metrics
          alertGroup=alertGroup
          mode=mode
          level=level
        }}
      {{else if (eq pageScope "project")}}
        {{alert/form-project-rule-row
          removeRule=(action "removeRule")
          condition=alertRule
          alertRules=alertRules
          editing=editing
          pageScope=pageScope
          isCreate=isCreate
          model=alertRule
          monitoringEnabled=monitoringEnabled
          metrics=metrics
          alertGroup=alertGroup
          mode=mode
          level=level
        }}
      {{/if}}
    {{else}}
      <div class="p-20">
        {{t "formIngress.noRules"}}
      </div>
    {{/each}}
  {{/if}}
</div>
<div class="row">
  <button
    class="btn bg-link icon-btn pull-right"
    type="button"
    {{action "addRule"}}
  >
    <i class="icon icon-plus text-small"></i>
    <span>
      {{t "alertPage.index.addAlert"}}
    </span>
  </button>
</div>